<template>
	<view class="bodyer_footer Column">
		<view class="cutBox Column">
			<view class="cutTabbar Row" :style=" 'top:' + height + 'px;'">
				<view class="tabItem" :class="{'active' : index == current}" @click="clickTab(index,item.type)"
					v-for="(item,index) in tabItemList" :key="index">{{item.name}}</view>
			</view>

			<scroll-view scroll-with-animation scroll-y :scroll-top="scrollTop" class="cutContent Column">
				<view class="child Row" v-for="(item,index) in FinishedList" :key="index" v-if="current == 0">
					<view class="Column">
						<view class="nickname">{{item.realname}}</view>
						<view class="">{{item.mobile}}</view>
					</view>
					<view class="Row">商户数 <h4 class="h5CSS">{{item.merchant_num}}</h4>
					</view>
				</view>

				<view class="child Row" v-for="(item,index) in DividendList" :key="index" v-if="current == 1">
					<view class="Column">
						<view class="nickname">{{item.realname}}</view>
						<view class="">{{item.mobile}}</view>
					</view>
					<view class="Row">商户数 <h4 class="h5CSS">{{item.merchant_num}}</h4>
					</view>
				</view>

				<view class="Row emptyBox">实在没有了～</view>
			</scroll-view>
		</view>

		<!-- <view class="arrow-top Row" @click="backToTop()">
			<u-icon name="arrow-up" color="#07235a" size="20"></u-icon>
		</view> -->
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	export default {
		data() {
			return {
				scrollTop: 0,
				height: uni.getSystemInfoSync().statusBarHeight == 0 ? 40 : uni.getSystemInfoSync().statusBarHeight,
				tabItemList: [{
						'name': '已完成的直推',
					},
					{
						'name': '未完成的直推', //d
					}
				],
				current: 0,

				FinishedList: [],
				DividendList: [],
				level_id: "",
				thisMonthDirectNum: "",
				merchant_num: "",
			};
		},
		onShow() {
			this.FinishedList = [];
			this.DividendList = [];
			this.getDividendList();
		},
		methods: {
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

			clickTab(cur, type) { //切换
				this.current = cur;
				console.log(this.current)
			},

			getDividendList() {
				let that = this;
				uni.$u.http.post('/kafu/dt_month_dividend/list', {}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return false;
					}
					this.FinishedList = this.FinishedList.concat(res.data.meetTheStandard);
					this.DividendList = this.DividendList.concat(res.data.notUpToStandard);
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.bodyer_footer {
		width: 92.2%;
		justify-content: space-between;
		border-radius: 12rpx;
		padding: 30rpx;
		padding-bottom: 10rpx;

		.arrow-top {
			background-color: #fff;
			box-shadow: 4px 4px 10px #e2e2e2;
			padding: 20rpx;
			position: fixed;
			right: 25px;
			bottom: 60px;
		}

		.cutBox {
			align-items: center;
			width: 100%;
			height: 90vh;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;
		}

		/* 切换菜单 */
		.cutTabbar {
			display: flex;
			justify-content: space-between;
			width: 96%;
			padding-top: 10px;
			background-color: #fff;
			// position: absolute;
			// top: 0;
			// left: 20rpx;
		}

		.tabItem {
			width: 48%;
			color: #7E7E9A;
			display: flex;
			justify-content: center;
			text-align: center;
			font-size: 30rpx;
			border-radius: 6rpx;
			background-color: #F5F6F8;
			padding: 16rpx 0;
		}

		.active {
			color: white;
			background-color: #0056FF;
		}

		.cutContent {
			justify-content: space-between;
			width: 100%;
			height: 83vh;
			// margin-top: 40px;

			.emptyBox {
				justify-content: center;
				padding: 20rpx 0;
			}

			.child {
				justify-content: space-between;
				width: 94%;
				border-bottom: 2rpx solid #F5F6F8;
				padding: 25rpx 16rpx;

				.nickname {
					font-weight: 600;
				}

				.h5CSS {
					margin-left: 5px;
				}

				.text {
					color: #07235a;
					font-size: 28rpx;
				}
			}
		}
	}
</style>